<template>
	<view class="container">
		<navbar headTitle="发布任务"></navbar>
		<view class="container-box">
			<!-- 性别 -->
			<view class="submit-type">
				<view class="submit-type-title">
					<text>性别</text>
				</view>
				<view class="submit-type-content">
					<view class="submit-radio">
						<view @click="sex='1'">
							<image style="width: 36rpx;" mode="widthFix" :src="sex=='1'?'../../static/common/radio-select.png':'../../static/common/radio-noselect.png'">
							</image>
							<text>男</text>
						</view>
						<view @click="sex='2'">
							<image style="width: 36rpx;" mode="widthFix" :src="sex=='2'?'../../static/common/radio-select.png':'../../static/common/radio-noselect.png'">
							</image>
							<text>女</text>
						</view>
						<view @click="sex='3'">
							<image style="width: 36rpx;" mode="widthFix" :src="sex=='3'?'../../static/common/radio-select.png':'../../static/common/radio-noselect.png'">
							</image>
							<text>不限</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 位置 -->
			<view class="submit-type">
				<view class="submit-type-title">
					<text>位置</text>
					<text @click="getLocation" style="color: #b30002;font-size: 28rpx;">获取当前位置</text>
				</view>
				<view class="submit-type-content">
					<view class="submit-input">
						<u-input v-model="address" type="text" placeholder="请输入当前位置" :clearable="false" :border="false" />
					</view>
				</view>
			</view>
			
			<!-- 需要人数 -->
			<view class="submit-type">
				<view class="submit-type-title">
					<text>需要人数</text>
				</view>
				<view class="submit-type-content">
					<view class="submit-input">
						<u-input v-model="personNum" type="number" placeholder="请输入人数" :clearable="false" :border="false" />
					</view>
				</view>
			</view>
			
			<!-- 联系人 -->
			<view class="submit-type">
				<view class="submit-type-title">
					<text>联系人</text>
				</view>
				<view class="submit-type-content">
					<view class="submit-input">
						<u-input v-model="contactsPerson" type="text" placeholder="请输入姓名" :clearable="false" :border="false" />
					</view>
				</view>
			</view>
			
			<!-- 请输入联系电话 -->
			<view class="submit-type">
				<view class="submit-type-title">
					<text>请输入联系电话</text>
				</view>
				<view class="submit-type-content">
					<view class="submit-input">
						<u-input v-model="mobilePhone" type="number" placeholder="请输入联系电话" :clearable="false" :border="false" />
					</view>
				</view>
			</view>
			<view class="att-info">
				注意：<br />
				1、请核实信息的时效与准确<br />
				2、有最新消息请及时反馈
			</view>
			<view class="release-btn" @click="submitHelp()"> 发布 </view>
		</view>
	</view>
</template>

<script>
	import moment from "moment";
	import {
		addTask
	} from "@/api/tab2";
	var _this;
	export default {
		data() {
			return {
				// baseUrl:'http://192.168.3.23:8085/jeecg-boot/',
				baseUrl: "http://weixiaokong.91xiaokong.com/jeecg-boot/",
				
				/* 性别 */
				sex: "1",
				/* 姓名 */
				contactsPerson: "",
				/* 创建时间 */
				createTime: "",
				trappedPersons: "",
				/* 联系电话 */
				mobilePhone: "",
				/* 当前位置 */
				address: "",
				/* 地图x坐标轴 */
				longitude: "",
				/* 地图y坐标轴 */
				latitude: "",
				/* 信息内容 */
				material: "",
				openId: "ogiDYs4eDr9DA2pofZeYsFQygtt4",
				/* 需要人数 */
				personNum: "",
			};
		},
		onLoad() {
			_this = this;
			let openid = uni.getStorageSync("openid");
			if (openid) {
				_this.openId = openid;
			}
		},
		methods: {
			// 获取位置
			getLocation() {
				uni.getLocation({
					geocode: true,
					type: "gcj02", //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						// uni.openLocation({
						// 	latitude: latitude,
						// 	longitude: longitude,
						// 	success: function() {
						// 		console.log('success');
						// 	}
						// });
						uni.request({
							url: _this.baseUrl + "rescue/hnjzRescueInformation/geocoder",
							method: "POST",
							header: {
								"Content-Type": "application/x-www-form-urlencoded",
							},
							data: {
								// location: '39.984154,116.307490'
								location: _this.latitude + "," + _this.longitude,
							},
							success(res) {
								// console.log(res.data.result.result.address);
								_this.address = res.data.result.result.address;
							},
							fail(err) {
								console.log(err);
							},
						});
					},
					fail(err) {
						console.log(err);
					},
				});
			},
			
			// 提交信息
			async submitHelp() {
				const {
					address,
					contactsPerson,
					mobilePhone,
					material,
					openId,
					sex,
					personNum,
				} = _this;
				if (
					address=="" ||
					contactsPerson=="" ||
					mobilePhone=="" ||
					personNum==""
				) {
					uni.showToast({
						title: "请认真填写信息",
						icon: "error"
					});
					return;
				}
				
				/* 验证手机号是否正确 */
				if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(mobilePhone))){
					uni.showToast({
						title: "请认真填写信息",
						icon: "error"
					});  
					return false; 
				} 
				await addTask({
					address,
					contactsPerson,
					createTime: moment().format("YYYY-MM-DD HH:mm:ss"), //当前时间,
					mobilePhone,
					material,
					openId,
					sex,
					rescueType: "3",
					personNum,
				});
				uni.navigateBack({
					delta: 1,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;

		.container-box {
			padding: 0 30rpx;
			padding-top: 40rpx;
			width: 100%;
			height: calc(100% - 88rpx);
			overflow-y: scroll;
			box-sizing: border-box;

			.submit-type {
				width: 100%;
				padding-top: 30rpx;
				
				.submit-type-title {
					width: 100%;
					font-size: 32rpx;
					line-height: 32rpx;
					font-weight: bold;
					color: #333333;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				
				.submit-type-content {
					width: 100%;
					margin-top: 25rpx;
					
					/* 单选框 */
					.submit-radio {
						width: 100%;
						height: 99rpx;
						display: flex;
						justify-content: space-around;
						align-items: center;
						color: #333333;
						font-size: 30rpx;
						
						view {
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							text {
								margin-left: 12rpx;
							}
						}
					}
					
					/* 输入框 */
					.submit-input {
						background-color: #f2f2f2;
						width: 100%;
						padding-left: 30rpx;
						padding-top: 10rpx;
						padding-bottom: 10rpx;
						box-sizing: border-box;
						border-radius: 16rpx;
						overflow: hidden;
					}
				}
			}
		}
	}

	.release-btn {
		width: 100%;
		height: 90rpx;
		margin: 90rpx auto;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		background-color: #b30002;
		color: #ffffff;
		font-size: 32rpx;
	}

	.att-info {
		margin: 30rpx 0 0 10rpx;
		font-size: 30rpx;
		color: #b30002;
	}
</style>
